<template>
  <div id="column_chart" class="yl-chart-container"></div>
</template>

<script>
import { Column } from '@antv/g2plot'
export default {
  data () {
    return {
      data: [
        {
          type: '家具家电',
          sales: 38
        },
        {
          type: '粮油副食',
          sales: 52
        },
        {
          type: '生鲜水果',
          sales: 61
        },
        {
          type: '美容洗护',
          sales: 145
        },
        {
          type: '母婴用品',
          sales: 48
        },
        {
          type: '进口食品',
          sales: 38
        },
        {
          type: '食品饮料',
          sales: 38
        },
        {
          type: '家庭清洁',
          sales: 38
        }
      ]
    }
  },

  mounted () {
    this.createColumnChart()
  },

  methods: {
    createColumnChart () {
      const columnPlot = new Column(document.getElementById('column_chart'), {
        title: {
          visible: true,
          text: '基本柱状图'
        },
        forceFit: true,
        data: this.data,
        padding: 'auto',
        xField: 'type',
        xAxis: {
          visible: true
        },
        yField: 'sales',
        meta: {
          type: {
            alias: '类别'
          },
          sales: {
            alias: '销售额(万)'
          }
        },
        label: {
          visible: true,
          style: {
            fill: '#0D0E68',
            fontSize: 12,
            fontWeight: 600,
            opacity: 0.6
          }
        },
        interactions: [
          {
            type: 'scrollbar'
          }
        ]
      })

      columnPlot.render()
    }
  }
}
</script>
